<template>
  <div class="box">
	  <h1>记事本</h1>
	  <MyHeader @addThing="addThing"></MyHeader>
	  <MyList :things="things" @del="del" ></MyList>
	  <MyFooter :things="things" @clearAll="clearAll"></MyFooter>
  </div>
</template>

<script>
  import MyHeader from '@/components/MyHeader'  
  import MyList from '@/components/MyList'  
  import MyFooter from '@/components/MyFooter'  

export default {
		name:'App',//和html联系起来
		components:{MyHeader,MyList,MyFooter},
		data() {
			return {
				things:[
					{id:'1',title:'Vue1',done:false},
					{id:'2',title:'Vue2',done:false}
				],
				doneTotal:0
			}
		},
		methods: {
			addThing(thing){
				this.things.unshift(thing);
			},
			del(id){
				for (let i=0;i<this.things.length;i++) {
					if (this.things[i].id ==id) {
						this.things.splice(i,1);
					}
				}
			},
			clearAll(){
				this.things = this.things.filter((thing)=>{
					return !thing.done
				})
			}
		},
		
	}
</script>

<style scoped>
	*{
		padding: 0;
		margin: 0 auto;
	}
	.box {
		width: 600px;
	}
</style>
